<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<script>
	$(document).ready(function() {
		$("#listUserTab").tablesorter();
		$("#classesList").tablesorter();
	});
</script>

<script type="text/javascript">
	$(document)
			.ready(
					function() {
						
						
						
						$('#buttonAddUpdUser').click(function() {
							if($('#idUser').val() != -1){
								$.ajax({
									url : 'http://localhost:8080/easySchoolWS/middleware/user/getUserById?idUser='+$('#idUser').val(),
									type : 'GET',
									error : function(
											jqXHR,
											textStatus,
											errorThrown) {
										// En cas d'erreur, on le signale
										alert('error');
									},
									success : function(
											data,
											textStatus,
											jqXHR) {
										// Succes. On affiche un message de confirmation
										
										$(data).find('user').each(function() {
													
													
													$('#name').val($(this).find('name').text());
													$('#surname').val($(this).find('surname').text());
													
													var d =new Date(Date.parse($(this).find('birthday').text().substring(0,10)));
													
													$("select#day option[value="+d.getDate()+"]").attr('selected', 'selected');
													$("select#month option[value="+(d.getMonth()+1)+"]").attr('selected', 'selected');
													$("select#year option[value="+d.getFullYear()+"]").attr('selected', 'selected');
													
													
													$.ajax({
														url : 'http://localhost:8080/easySchoolWS/middleware/school/getSchoolClassById?idClass='+$(this).find('idClass').text(),
														type : 'GET',
														error : function(
																jqXHR,
																textStatus,
																errorThrown) {
															// En cas d'erreur, on le signale
															alert('error');
														},
														success : function(
																data,
																textStatus,
																jqXHR) {
															$(data).find('class').each(function() {
																$("select#schoolSelect option[value="+$(data).find('schoolId').text()+"]").attr('selected', 'selected');
																$('#schoolSelect').change();
																
																$("select#classSelect option[value="+$(data).find('idClass').text()+"]").attr('selected', 'selected');
															});
														}
													});
												
													
										});
									}
								});
							}
							$.blockUI({
								message : $('#addUserForm'),
								css : {
									width : '50%'
								}
							});
						});
						
						
						
						$('#buttonAddTeachClass').click(function() {
							$.blockUI({
								message : $('#addTeachClassAdminForm'),
								css : {
									width : '50%'
								}
							});
						});
						
						$('#save')
								.click(
										function() {
											alert('régler le probleme de la validation au niveau de l action: le message d erreur ne s affiche pas');
											//test les champs pour voir s'ils sont vides
											valid = true;
											if ($("#name").val() == "") {
												$("#name").next(
														".error-message")
														.fadeIn()
														.text("remplir le nom");
												valid = false;
											} else {
												$("#name").next(
														".error-message")
														.fadeOut();
											}
											if ($("#surname").val() == "") {
												$("#surname")
														.next(".error-message")
														.fadeIn()
														.text(
																"remplir le prenom");
												valid = false;
											} else {
												$("#surname").next(
														".error-message")
														.fadeOut();
											}

											if ($("#day").val() == '-1'
													|| $("#month").val() == '-1'
													|| $("#year").val() == '-1') {
												$("#dayErrorMessage")
														.fadeIn()
														.text(
																"saisir une date valide");
												valid = false;
											} else {
												$("#dayErrorMessage").fadeOut();
											}

											if (valid) {
												$.unblockUI();
											}
											return valid;

										});

						$('#cancelButton').click(function() {
							$.unblockUI();
							$("#name").val("");
							$("#surname").val("");
							return false;
						});
						
						$('#cancelAddTeachClassButton').click(function() {
							$.unblockUI();
							return false;
						});
						
						
						$('#addRemoveClassesButton').click(function() {
							
							if($('#idTeacher').val() != -1){
								
								$('#addRemoveClasses').fadeIn();
								
								$.ajax({
									url : 'http://localhost:8080/easySchoolWS/middleware/user/getUserById?idUser='+$('#idTeacher').val(),
									type : 'GET',
									error : function(
											jqXHR,
											textStatus,
											errorThrown) {
										// En cas d'erreur, on le signale
										alert('error');
									},
									success : function(
											data,
											textStatus,
											jqXHR) {
										// Succes. On affiche un message de confirmation
										$("#dataBody").html("");
										$(data).find('user').each(function() {
													
													
													$('#nameT').text($(this).find('name').text());
													$('#surnameT').text($(this).find('surname').text());
													
													$(data).find('classes').each(function() {
														$("#dataBody").append("<tr><td>"+$(this).find('school').find('libelleSchool').text()+"</td><td>"+$(this).find('libelle').text()
																+"</td><td><a href='removeUserClassesAdmin.simon?id="+$(this).find('idClass').text()+"&idTeacher="+$('#idTeacher').val()+"'><img style='width: 20px' src='image/Button-Supp-icon.png' /></a></td></tr>");
													});
												
													
										});
									}
								});
							}
							
						});
						
						
						
						$('#schoolTeachSelect')
						.change(
								function() {
									var idSchool = $('#schoolTeachSelect').val();
									
									if (idSchool == '-1') {
										$('#classTeachSelect').fadeOut();
									} else {
										$.ajax({
													url : 'http://localhost:8080/easySchoolWS/middleware/school/getAllSchoolClasses?schoolId='+idSchool,
													type : 'GET',
													async : false,
													error : function(
															jqXHR,
															textStatus,
															errorThrown) {
														// En cas d'erreur, on le signale
														alert('error');
													},
													success : function(
															data,
															textStatus,
															jqXHR) {
														// Succes. On affiche un message de confirmation
														$('#classTeachSelect').fadeIn().html('')
																.html('<option value="-1"> class </option>');
														$(data)
																.find('class').each(function() {
																	$('#classTeachSelect').append('<option value="'
																		+ $(this).find('idClass').text()
																		+ '">'+ $(this).find('libelle').text()+ '</option>');
																		});
													}
												});
									}

								});
						$('#schoolSelect')
								.change(
										function() {
											var idSchool = $('#schoolSelect').val();
											
											if (idSchool == '-1') {
												$('#classSelect').fadeOut();
											} else {
												$.ajax({
															url : 'http://localhost:8080/easySchoolWS/middleware/school/getAllSchoolClasses?schoolId='+idSchool,
															type : 'GET',
															async : false,
															error : function(
																	jqXHR,
																	textStatus,
																	errorThrown) {
																// En cas d'erreur, on le signale
																alert('error');
															},
															success : function(
																	data,
																	textStatus,
																	jqXHR) {
																// Succes. On affiche un message de confirmation
																$('#classSelect').fadeIn().html('')
																		.html('<option value="-1"> class </option>');
																$(data)
																		.find('class').each(function() {
																			$('#classSelect').append('<option value="'
																				+ $(this).find('idClass').text()
																				+ '">'+ $(this).find('libelle').text()+ '</option>');
																				});
															}
														});
											}

										});

					});
</script>


<h1>User admin</h1>
<h2>liste des utilisateur => eleves</h2>
<table id="listUserTab" class="tablesorter">
	<thead>
		<tr>
			<th>id</th>
			<th></th>
			<th>nom</th>
			<th>prenom</th>
			<th>date de naissance</th>
			<th>ecole</th>
			<th>classe</th>
			<th style=""></th>
			<th><s:a id="buttonAddUser" href="#" onclick="document.getElementById('idUser').value = -1;document.getElementById('buttonAddUpdUser').click(); return false;">
					<img style="width: 20px" src="image/Button-Add-icon.png" />
					<s:a id="buttonAddUpdUser" href="#" />
				</s:a></th>
		</tr>
	</thead>
	<tbody>
		<s:iterator id="userList" value="%{#request['listUsers']}"
			var="userBean">
			<tr>
				<td><s:property value="id" /></td>
				<td><s:if test="%{#userBean.isProfessor}"><a onclick="document.getElementById('idTeacher').value = ${userBean.id};document.getElementById('addRemoveClassesButton').click(); return false;"><img
						style="width: 20px" src="image/isprof.png" /></a></s:if> </td>
				<td><s:property value="name" /></td>
				<td><s:property value="surname" /></td> 
				<td><s:property value="birthday" /></td>
				<td><s:property value="userClass.school.libelle" />(<s:property
						value="userClass.school.ville" />)</td>
				<td><s:property value="userClass.libelle" /></td>
				<td><a id="buttonUpdUser${userBean.id}" onclick="document.getElementById('idUser').value = ${userBean.id};document.getElementById('buttonAddUpdUser').click(); return false;">
						<img style="width: 20px" src="image/Button-Upd-icon.png" />
					</a>
				</td>
				<td><a onclick="alert('faire la validation de la suppression')"
					href="removeUserAdmin.simon?id=${userBean.id}"><img style="width: 20px" src="image/Button-Supp-icon.png" /></a></td>
			</tr>
		</s:iterator>

		<div style="display: none;"><a id="buttonManageClass"></a></div>
	
	</tbody>
</table>

<div style="display: none;" >
<a id="addRemoveClassesButton"></a>
</div>


faire un tableau avec possibilitées de tri, possibilitées de filtrage, suppression modification et ajout (en haut a droite du tableau)
    
    lorsque l'on ajoute ou l'on modifie, le formulaire apparait en popup avec tous les champs
    
    faire un system d'arbre pour montrer l'appartenance à une classe (geree dans classAdmin)
     
faire la gestion des professeurs

mettre en place la sécurité d 'appel au WS REST




<div id="addUserForm" style="display: none; cursor: default;">
	<form method="post" id="addUserAdminForm" action="addUserAdmin.simon">
		<input type="hidden" id="idUser" name="beanUser.id" />
		<input type="text" name="beanUser.name" size="20" id="name" /> <span
			class="error-message"></span></br> <input type="text"
			name="beanUser.surname" size="20" id="surname" /> <span
			class="error-message"></span></br>
		<s:select id="day" name="beanUser.day" headerKey="-1"
			headerValue=" day " list="days" />
		<s:select id="month" name="beanUser.month" headerKey="-1"
			headerValue="month" list="months" />
		<s:select id="year" name="beanUser.year" headerKey="-1"
			headerValue=" year" list="years" />
		<span id="dayErrorMessage" class="error-message"></span></br>
		<s:select id="schoolSelect" name="beanUser.schoolSelected"
			headerKey="-1" headerValue=" school " list="schools"
			listKey="idEcole" />
		<select id="classSelect" style="display: none" name="beanUser.idClass"></select> <br />
		 <s:checkbox id="isProf" name="beanUser.isProfessor"></s:checkbox>
		 <br />
		  <br />
		<input type="submit" class="boutonLogin" value="Enregistrer" id="save">
		</submit>
		<a id="cancelButton" class="boutonLogin" href="#">Annuler</a>

	</form>

</div>


<div id="addTeachClassForm" style="display: none; cursor: default;">
<form method="post" id="addTeachClassAdminForm" action="addTeachClassAdmin.simon">
<input type="hidden" id="idTeacher" name="idTeacher"/>
selectionner une nouvelle classe pour ce prof
</br>
<s:select id="schoolTeachSelect" headerKey="-1" headerValue=" school " list="schools" listKey="idEcole" />
<select id="classTeachSelect" style="display: none" name="idClassToAddToTeacher"></select> <br />
<input type="submit" class="boutonLogin" value="Enregistrer" id="save">
		</submit>
<a id="cancelAddTeachClassButton" class="boutonLogin" href="#">Annuler</a>
</form>
</div>


<div id="addRemoveClasses" style="display: none; cursor: default;">

 
</br>
</br>
</br>	
	<s:label id="nameT"></s:label> <s:label id="surnameT"></s:label>
	<table id="classesList" class="tablesorter">
		<thead>
			<tr>
				<th>ecole</th>
				<th>classes</th>
				<th>
				<s:a id="buttonAddTeachClass" href="#">
					<img style="width: 20px" src="image/Button-Add-icon.png" />
				</s:a>
				</th>
			</tr>
		</thead>
		<tbody id="dataBody">
			
		</tbody>
	</table>
	
	</br>
	
	
</div>

<script type="text/javascript">
$(document).ready(function() {
	
	$('#idTeacher').val(<%= request.getParameter("idTeacher") %>);
	if($('#idTeacher').val() != ''){
	$('#addRemoveClassesButton').click();
	}
});
</script>


